<script setup lang="ts">
import { RestTable, Button } from "@/components"
import { useMockClosuredDataSource } from "@/utils/mock"
import { TableColumn } from "@/types"


const columns:TableColumn[] = [
  { title: "编码", dataIndex: "value" },
  { title: "名称", dataIndex: "label" },
  {
    title: "测试",
    dataIndex: "label",
    sorter: {compare: (a:any, b:any) => b.id - a.id},
    description: '测试提示',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'John',
        value: 'John',
      },
    ],
    onFilter: (value: string | number | boolean, record: any) => record.name.indexOf(value) === 0,
  },
  { title: "操作", dataIndex: "action" },
]

const datasource = useMockClosuredDataSource()
</script>

<template>
  <Button size="lg">测试</Button>
  <RestTable
    :columns="columns"
    :datasource="datasource"
    :scroll="{ y: 100 }"
    :paginationShowTotal="true"
    rowKey="value">
    <template #operations>
      <Button>操作</Button>
    </template>
    <template #bodyCell="{ column }">
      <span v-if="column.dataIndex==='action'">
        <Button type="link">查看</Button>
      </span>
    </template>
  </RestTable>
</template>
